<template>
  <!-- 辅助线 -->
  <view>
    <view class="lines" :style="[boxStyle]">
      <view class="item" :style="[lineStyle]"></view>
    </view>
  </view>

</template>

<script>
export default {
  name: 'guide',
  props: {
    dataConfig: {
      type: Object,
      default: () => {
      }
    },
  },
  computed: {
    //最外层盒子的样式
    boxStyle() {
      return {
        background: `linear-gradient(${this.dataConfig.bgColor.color[0].item}, ${this.dataConfig.bgColor.color[1].item})`,
        margin: this.dataConfig.mbConfig.val * 2 + 'rpx' + ' ' + this.dataConfig.lrConfig.val * 2 + 'rpx' +
            ' ' + 0,
      }
    },
    //线条样式
    lineStyle() {
      return {
        borderBottomWidth: this.dataConfig.heightConfig.val + 'px',
        borderBottomColor: this.dataConfig.lineColor.color[0].item,
        borderBottomStyle: this.dataConfig.lineStyle.list[this.dataConfig.lineStyle.tabVal].style
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.lines {
  padding: 0 20rpx;

  .item {
    width: 100%;
    box-sizing: border-box;
    border-bottom-color: #666;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
  }
}
</style>